/*
 * @Author: 张笑天
 * @Date: 2018-03-07 17:12:37
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2020-04-13 14:08:26
 */
@prefixCls: wea-email-list;

.@{prefixCls}-left-tab-select {
  min-width: 100px;
  &>div>ul {
    max-height: 100%;
    &>li {
      padding: 0;
      .@{prefixCls}-left-tab-select-ops {
        &-line {
          border-bottom: 1px solid #d9d9d9;
        }
        padding: 7px;
        &-icon {
          display: inline-block;
          min-width: 12px;
          margin-right: 5px;
        }
      }
    }
  }
  &-Bar {
    .ant-select-selection__rendered {
      .ant-select-selection-selected-value {
        .activeOps {
          margin: 0 !important;
        }
      }
    }
  }
}

.@{prefixCls} {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .text-over {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .clear-float {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    _zoom: 1;
  }
  .@{prefixCls}-layout {
    .wrap {
      height: 100%;
      background-color: #fff;
      position: relative;
      transition: all .1s ease-in-out;
    }
    .wrap;
    &-left {
      .wrap;
      .@{prefixCls}-left-wrap {
        .wrap;
      }
      border-right: 1px solid #eaeaea;
      z-index: 1;
      .wea-search-container{
        .wea-advanced-search{
          width: 100px;
          top: -37px;
        }
      }
      .@{prefixCls}-layout-btn {
        width: 18px;
        height: 60px;
        position: absolute;
        top: 50%;
        right: -4px;
        margin-top: -30px;
        z-index: 11;
        cursor: pointer;
        background-size: 100% 100%;
      }
      .@{prefixCls}-layout-btn-show {
        right: -19px;
        background: url('/cloudstore/resource/pc/com/images/right-show.png') no-repeat -1px 0;
      }
      .@{prefixCls}-layout-btn-show:hover {
        background: url('/cloudstore/resource/pc/com/images/right-show-hover.png') no-repeat -1px 0;
      }
      .@{prefixCls}-layout-btn-hide {
        background: url('/cloudstore/resource/pc/com/images/right-hide.png') no-repeat 0 0;
      }
      .@{prefixCls}-layout-btn-hide:hover {
        background: url('/cloudstore/resource/pc/com/images/right-hide-hover.png') no-repeat 0 0;
      }
      .@{prefixCls}-left-wrap {
        // tab
        .@{prefixCls}-left-tab {
          margin-bottom: 45px;
          position: absolute;
          top: 0;
          width: 100%;
          min-height: 47px;
          &-ops {
            height: 46px;
            line-height: 46px;
            position: absolute;
            top: 46px;
            // padding-left: 60px;
            width: 100%;
            min-width: 459px;
            overflow: hidden;
            white-space: nowrap;
            border-bottom: 1px solid #e2e2e2;
            &-dropdown {
              width: calc(100% - 61px);
              margin: 0px;
              display: inline-block;
            }
            >span {
              margin-right: calc(~'(100% - 406px)/4')
            }

            .ant-btn span:first-child {
              display: inline-block;
              max-width: 66px;
              overflow: hidden;
              vertical-align: middle;
              text-overflow: ellipsis;
            }

            .wea-checkbox {
              // margin: 0 23px 0 -37px;
              margin: 0 18px 0 24px;
            }
            .wea-email-dropdown-btn {
              display: inline-block;
              width: 25%;
              min-width: 40px;
              padding-right: 10px;
              &:last-child {
                margin-right: 14px;
              }
              .wea-dropdown {
                width: 100%;
                padding: 5px 6px;
              }
            }
          }
          &-ops.hideRight {
            width: 25%;
            border-bottom: 0;
            .wea-checkbox {
              margin-right: 12px;
            }
          }
          &-ops.bigFont, &-ops.english {
            width: 29%;
            .wea-checkbox {
              margin-right: 23px;
            }
            .wea-email-dropdown-btn {
              width: 25.5%;
            }
          }
          .wea-tab {
            background-color: #fafafa;
            &>.ant-row {
              .wea-search-tab {
                padding-top: 10px;
                &>span {
                  margin-left: -110px !important;
                  // .wea-dropdown {
                  //   width: 100px;
                  //   height: 28px;
                  //   margin-right: -2px;
                  //   vertical-align: top;
                  //   background: #fff;
                  //   position: relative;
                  //   z-index: 2;
                  // }
                  .wea-select {
                    .@{prefixCls}-left-tab-select-ops {
                      width: 100%;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      &>span>i {
                        display: none;
                      }
                      
                    }
                    margin-right: -2px;
                    width: 100px;
                    .ant-select {
                      vertical-align: top;
                    }
                    .ant-select-selection {
                      height: inherit;
                    }
                    .ant-select-selection--single .ant-select-selection__rendered {
                      height: 26px;
                    }
                    .ant-select-open,
                    .ant-select-focused {
                      .ant-select-selection {
                        box-shadow: none;
                        // Show right border
                        position: relative;
                        z-index: 2;
                        &:hover {
                          // Show right border
                          position: relative;
                          z-index: 2;
                        }
                      }
                    }
                  }
                }
                .wea-input-focus {
                  width: 100%;
                  vertical-align: top;
                  line-height: 1;
                  padding-left: 0;
                  background: #FFF;
                  .ant-input-wrapper {
                    width: 100%;
                    margin-right: 0px;
                    border-right: none;
                    &> input {
                      width: 100%;
                      // Show right border
                      z-index: 1;
                      border-right: none;
                    }
                  }
                  &>.wea-input-focus-btn {
                    z-index: 2;
                    top:-2px;
                  }
                }
                &>button {
                  background-color: #fff;
                  position: absolute;
                  // right: 10px;
                  top: 10px;
                  height: 28px;
                  width: 100px;
                  line-height: 1;
                }
              }
            }
          }
        }
        .@{prefixCls}-left-tab-collapsed {
          margin-bottom: 0;
          .wea-tab {
            &>.ant-row {
              padding-left: 0;
              .wea-search-tab {
                &>span {
                  .wea-select {
                    margin-right: -1px;
                    .ant-select-selection {
                      height: inherit;
                    }
                    .ant-select-selection--single .ant-select-selection__rendered {
                      height: 26px;
                    }
                  }
                }
                .wea-input-focus {
                  width: auto;
                  .ant-input-wrapper>input {
                    width: 150px;
                    height: 100%;
                  }
                }
              }
            }
          }
          .@{prefixCls}-left-tab-ops {
            // width: auto;
            top: 0px;
          }
        }
      }
      .@{prefixCls}-left-main {
        height: 100%;
        padding-bottom: 92px;
        position: absolute;
        width: 100%;
        top: 93px;
        
        .wea-new-table {
          // .ant-table {
          //   border-bottom: 1px solid #eaeaea;
          // }
          .ant-pagination.ant-table-pagination {
            margin: 7px;
          }
          .ant-table-row{
            .@{prefixCls}-table-sendfrom {
              width: 100%;
              .text-over;
              &>a {
                cursor: default;
                color: inherit;
              }
              &>a:hover {
                cursor: default;
                text-decoration:none;
                color: inherit;
              }
              &>i {
                font-size: 16px;
              }
            }
            .@{prefixCls}-table-subject {
              // width: 50%;
              line-height: 22px;
              .text-over;
              cursor: pointer;
            }
            .@{prefixCls}-table-tags {
              width: 50%;
              float: right;
              .ant-tag {
                max-width: calc(100% - 18px);
                position: relative;
                transition: none;
                &:hover {
                  max-width: 100%;
                  padding-right: 28px;
                }
                &-text {
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: inline-block;
                }
                .anticon-cross {
                  position: absolute;
                  line-height: 1;
                  top: 50%;
                  transform:translate(0%,-40%);
                  right: 8px;
                }
              }
            }
            .@{prefixCls}-table-senddate {
              width: 100%;
              white-space: nowrap;
              &>span>div {
                display: inline-block;
              }
              &-ops {
                float: right;
                margin-right: -8px;
                i {
                  cursor: pointer;
                  font-size: 16px;
                  margin-right: 16px;
                }
                .icon-email-Agency,
                .icon-email-Agency-o {
                  vertical-align: text-bottom;
                }
                .icon-email-Agency-o,
                .icon-email-Collection-o {
                  color: #444;
                  opacity: 0;
                  transition: all .1s cubic-bezier(0.075, 0.82, 0.165, 1);
                  -ms-transition: all .1s cubic-bezier(0.075, 0.82, 0.165, 1);
                }
              }
            }
            &:hover {
              .icon-email-Agency-o,
              .icon-email-Collection-o {
                opacity: 1;
              }
            }
          }
        }
        .@{prefixCls}-left-list {
          height: 100%;
          &>div {
            height: 100%;
            .ant-spin-container {
              height: 100%;
              padding-bottom: 52px;
              .@{prefixCls}-left-list-pagination {
                width: 100%;
                border-top: 1px solid #eaeaea;
                .ant-pagination {
                  float: right;
                  margin: 7px;
                  .ant-pagination-first, .ant-pagination-last {
                    min-width: 20px;
                    height: 20px;
                    line-height: 20px;
                    a:after {
                      height: 20px;
                      line-height: 20px;
                    }
                  }
                }
              }
            }
          }
          &-item {
            transition: all .1s ease-in-out;
            -ms-transition: all .1s ease-in-out;
            border-bottom: 1px solid #e2e2e2;
            &:after {
              .clear-float;
            }
            position: relative;
            padding-left: 137px;
            padding-right: 70px;
            min-height: 60px;
            .position {
              position: absolute;
              top: 50%;
            }
            &-left {
              height: 100%;
              position: absolute;
              left: 0;
              .wea-checkbox {
                display: inline-block;
                position: relative;
                height: 100%;
                margin: 0 23px;
                .content {
                  .position;
                  margin-top: -9px;
                }
              }
              i {
                font-size: 16px;
                .position;
                left: 60px;
                margin-top: -9px;
              }
              &-priority {
                color: #f00;
                font-size: 14px;
                font-weight: 600;
                .position;
                left: 77px;
                margin-top: -10px;
                cursor: default;
                
              }
              .wea-email-avatar {
                .position;
                left: 90px;
                margin-top: -20px;
              }
            }
            &-mid {
              width: 100%;
              padding: 10px 0;
              min-height: 60px;
              cursor: pointer;
              .ant-tag-text {
                max-width: 192px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
              }
              &>p {
                color: #666;
                line-height: 18px;
                &:last-child {
                  cursor: inherit;
                }
                &>span,
                &>a {
                  // font-size: 14px;
                  color: #333;
                }
                .text-over;
                &:first-child {
                  padding-right: 70px;
                  overflow: visible;
                  &>a {
                    display: inline-block;
                    max-width: 100%;
                    .text-over;
                    vertical-align: text-bottom;
                  }
                  &>.icon-email-Enclosure {
                    margin-left: 10px;
                    font-size: 14px;
                  }
                }
                &:last-child {
                  white-space: normal;
                }
              }
              .wea-tag {
                .anticon-cross {
                  position: relative;
                  top: -6px;
                }
              }
            }
            &-date {
              position: absolute;
              // right: 20px;
              left: 80%;
              top: 10px;
              line-height: 18px;
              color: #999;
              font-family: PingFangSC-Medium;
              text-align: left;
              white-space: nowrap;
            }
            &-waitdeal {
              position: absolute;
              // right: 78px;
              right: 18%;
              top: 12px;
              text-align: right;
              &>span {
                padding-right: 12px;
              }
              .icon-email-Agency {
                cursor: pointer;
                font-size: 16px;
                vertical-align: text-bottom;
                top: -5px;
                position: relative;
              }
              .icon-email-Agency-o {
                .icon-email-Agency;
                color: #444;
                opacity: 0;
                margin-right: 12px;
                transition: all .1s cubic-bezier(0.075, 0.82, 0.165, 1);
                -ms-transition: all .1s cubic-bezier(0.075, 0.82, 0.165, 1);
              }
            }
            &-right {
              position: absolute;
              right: 0;
              top: 0;
              width: 35px;
              padding: 0 8px;
              height: 100%;
              font-size: 16px;
              overflow: hidden;
              i {
                position: absolute;
                top: 50%;
                right: 10px;
                margin-top: -8px;
                cursor: pointer;
              }
            }
            &-right-fav {
              width: 0;
              padding: 0;
              opacity: 0;
              transition: opacity .1s ease-in-out;
              -ms-transition: opacity .1s ease-in-out;
              i {
                color: #fff;
              }
            }
            &:hover {
              background: #e9f7ff;
              .@{prefixCls}-left-list-item-right-fav {
                width: 35px;
                opacity: 1;
                padding: 0 8px;
                background: #bbb;
              }
              .@{prefixCls}-left-list-item-waitdeal {
                .icon-email-Agency-o {
                  opacity: 1;
                }
              }
            }
          }
          &-item.belongtoType {
            padding-left: 154px;
            .@{prefixCls}-left-list-item-left {
              .account-type {
                position: absolute;
                top: 50%;
                left: 52px;
                margin-top: -9px;
              }
              i {
                left: 82px;
              }
              &-priority {
                left: 74px;
              }
              .wea-email-avatar {
                left: 106px;
              }
            }
          }
        }

        .@{prefixCls}-left-list.scroll {
          .@{prefixCls}-left-list-item:last-child {
            border-bottom: 0;
          }
        }
      }
      .@{prefixCls}-left-main-collapsed {
        padding-bottom: 46px;
        top: 47px;
        .wea-new-table {
          .ant-table-header {
            table {
              .ant-table-thead>tr>th.ant-table-selection-column>span {
                display: none;
              }
            }
          }
        }
      }
    }
    &-right {
      .wrap;
      overflow: hidden;
    }
  }
}